<!-- 预算管理 -->
<template>
	<div class="t-wp" v-loading="state.loading">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="预算名称">
					<el-input v-model="state.queryParams.name" placeholder="请输入"/>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Plus" @click="showAdd()"> 新增 </el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<el-table :data="state.list" style="width: 100%" border>
				<el-table-column type="index" label="序号" width="55" align="center" />
				<el-table-column prop="name" min-width="200px" label="预算名称" align="center" show-overflow-tooltip />
				<el-table-column prop="appliedAmount" min-width="100px" label="预算金额" align="center" show-overflow-tooltip />
				<el-table-column prop="isPublicBudget" min-width="100px" label="公共预算" align="center" show-overflow-tooltip>
					<template #default="scope">
						{{scope.row.isPublicBudget ? '是' : '否'}}
					</template>
				</el-table-column>
				<el-table-column prop="year" min-width="100px" label="预算年度" align="center" show-overflow-tooltip />
				<el-table-column prop="description" min-width="200px" label="预算描述" align="center" show-overflow-tooltip />
				<el-table-column prop="deadLine" min-width="200px" label="预算使用截止期限" align="center" show-overflow-tooltip>
					<template #default="scope">
						{{scope.row.deadLine ? dayjs(scope.row.deadLine).format('YYYY-MM-DD') : ''}}
					</template>
				</el-table-column>
				<el-table-column prop="approvedAmount" min-width="100px" label="批复总额(元)" align="center" show-overflow-tooltip />
				<el-table-column prop="allocatedAmount" min-width="100px" label="发布金额(元)" align="center" show-overflow-tooltip />
				<el-table-column prop="dep" min-width="100px" label="申请部门" align="center" show-overflow-tooltip />
				<el-table-column prop="proposer" min-width="100px" label="申请人" align="center" show-overflow-tooltip />
				<el-table-column prop="spentAmount" min-width="100px" label="已匹配金额(元)" align="center" show-overflow-tooltip />
				<el-table-column prop="unallocatedAmount" min-width="100px" label="未匹配金额(元)" align="center" show-overflow-tooltip />
				<el-table-column label="操作" width="300" align="center" fixed="right" show-overflow-tooltip>
					<template #default="scope">
						<template v-if="!scope.row.isApproved">
							<el-button v-if="state.userType == 12 || scope.row.createUserId == oUserInfo.userInfos.userId" icon="el-icon-edit" size="small" text type="primary" @click="showAdd(scope.row)">编辑</el-button>
							<el-button v-if="state.userType == 12 || scope.row.createUserId == oUserInfo.userInfos.userId" icon="el-icon-delete" size="small" text type="primary" @click="deleteRow(scope.row)">删除</el-button>
							<el-button v-if="state.userType == 12" icon="ele-CircleCheck" size="small" text type="primary" @click="handleSave(scope.row)">锁定</el-button>
						</template>
						<template v-else>
							<el-button icon="ele-Memo" size="small" text type="primary" @click="handleRelation(scope.row)">相关项目</el-button>
							<el-button icon="ele-View" size="small" text type="primary" @click="() => {budgetDetailRef.open(scope.row.id);}">详情</el-button>
						</template>
						
						<el-button v-if="scope.row.fileId" icon="ele-View" size="small" text type="primary" @click="handleDownFile(scope.row)">附件</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:currentPage="state.tableParams.page"
				v-model:page-size="state.tableParams.pageSize"
				:total="state.tableParams.total"
				:page-sizes="[10, 20, 50, 100]"
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
			/>
		</el-card>

		<addModal ref="addModalRef" :userType="state.userType" @preview="preview" @reload="handleQuery"></addModal>
		<relationModal ref="relationModalRef"/>

		<mFilePreview ref="mFilePreviewRef"/>
		<budgetDetail ref="budgetDetailRef"/>
	</div>
</template>

<script setup name="SupplierManage">
import { onMounted, reactive, ref } from 'vue';
import {useRouter, useRoute} from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import addModal from "./modules/addModal.vue";
import relationModal from "./modules/relationModal.vue";
import {$get, $post, $postparams} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";
import dayjs from "dayjs";
import {getUserType} from "/@/api/system/user"
import SeeFile from "/@/components/SeeFile/index.vue";
import mFilePreview from "/@/components/mFilePreview/index.vue";
import budgetDetail from "/@/views/budgetManage/modules/detailModal.vue";


const router = useRouter();
const route = useRoute();
const addModalRef = ref();
const relationModalRef = ref();
const mFilePreviewRef = ref();
const budgetDetailRef = ref();
const oUserInfo = useUserInfo();


const PUBLIC_PATH = import.meta.env.VITE_PUBLIC_PATH;
const state = reactive({
	loading: false,

	queryParams: {
		name: '',
	},

	list: [],
	tableParams: {
		page: 1,
		pageSize: 20,
		total: 0,
	},

	userType: '', // 12是财务
});

onMounted(async () => {
	getType();
	handleQuery();
});

// 获取用户当前类型
const getType = () => {
	getUserType(oUserInfo.userInfos.userId).then(res => {
		state.userType = res.data.result;
	})
}

// 查询操作
const handleQuery = async () => {
	state.loading = true;
	let params = {
		...state.queryParams
	}
	var res = await $get('/budgetSrv/getbudget', params);
	state.list = res.result;
	state.tableParams.total = res.result?.total;
	state.loading = false;
};

// 重置操作
const resetQuery = () => {
	state.queryParams.name = '';
	handleQuery();
};

// 改变页面容量
const handleSizeChange = (val) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val) => {
	state.tableParams.page = val;
	handleQuery();
};

// 显示新增
const showAdd = (row) => {
	addModalRef.value.open(row);
}

// 删除项目
const deleteRow = row => {
	ElMessageBox.confirm('此操作将删除该项目，是否继续？', '提示', {
		type: 'warning'
	}).then(async () => {
		var res = await $post('/budgetSrv/delbudget/'+row.id);
		ElNotification({
	    title: '提示',
	    message: '删除成功',
	    type: 'success',
	  })
	  // 更新列表
	  handleQuery();
	})
}

// 修改钱
const showMoney = row => {
	moneyModalRef.value.open(row);
}

// 保存
const handleSave = row => {
	ElMessageBox.confirm('此操作将批准该预算，是否继续？', '提示', {
		type: 'warning'
	}).then(async () => {
		var res = await $post('/budgetSrv/approved/'+row.id);
		ElNotification({
	    title: '提示',
	    message: '批准成功',
	    type: 'success',
	  })
	  // 更新列表
	  handleQuery();
	})
}

const handleRelation = row => {
	relationModalRef.value.open(row);
}
const handleDownFile = row => {
	$get(`/budgetSrv/geibudgetfile/${row.fileId}`).then(res => {
		let obj = res.result;
		preview(obj.url);
	})
}

// 预览图片
const preview = (url) => {
	mFilePreviewRef.value.open(url);
}

</script>

<style lang="scss" scoped>
.t-wp {
	.voucher-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -100;
		opacity: 0;
		> div {
			width: 750px;
			height: 1080px;
			background: #fff;
			padding: 40px 100px 0;
			border: 1px solid #000;
		}
		.title {
			margin-bottom: 30px;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
		.row {
			font-size: 16px;
			line-height: 24px;
			margin-bottom: 10px;
			&:after {
				content: '';
				display: block;
				clear: both;
			}
			.label {
				float: left;
				width: 10em;
				text-align: right;
			}
			.value {
				float: left;
			}
		}
	}
}
</style>
